<template>
  <div class="addCus">
    <h2>问题管理</h2>
    <div class="operatingBox">
      <div class="operating">
        <el-button
          type="info"
          icon="el-icon-arrow-left"
          size="small"
          @click="getBack"
          >返回</el-button
        >
      </div>
    </div>
    <div class="formBox">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">类型</span>
            </label>
            <el-select v-model="questionData.type" class="form-control select2">
              <el-option label="常见问题" value="0"></el-option>
              <el-option label="业务问答" value="1"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">状态</span>
            </label>
            <el-select
              v-model="questionData.status"
              class="form-control select2"
            >
              <el-option label="新客服" value="0"></el-option>
              <el-option label="处理中" value="1"></el-option>
              <el-option label="已处理" value="2"></el-option>
              <el-option label="已取消" value="3"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">标题</span>
            </label>
            <el-input
              v-model="questionData.title"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">标签</span>
            </label>
            <el-input
              v-model="questionData.label"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">问题描述</span>
            </label>
            <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
              v-model="questionData.description"
            >
            </el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bothBtn">
      <el-button type="primary" @click="changeQueInfo">保存</el-button>
      <el-button type="info" plain @click="returnData">取消</el-button>
    </div>
  </div>
</template>
<script>
import { changeQue } from "@/api/customer";
export default {
  name: "addCustomer",

  data() {
    return {
      clientText: "",
      value10: "",
      input: "",
      updateData: {},
      value2: "",
      questionData: {
        userId: 1,
        type: "",
        title: "",
        status: "",
        label: "",
        description: "",
        id: 1,
      },
    };
  },
  created() {
    this.questionData.type = this.$route.query.type;
    this.questionData.title = this.$route.query.title;
    this.questionData.status = this.$route.query.status;
    this.questionData.label = this.$route.query.label;
    this.questionData.description = this.$route.query.description;
    this.questionData.id = this.$route.query.id;

  },

  methods: {
    //保存修改方法---------------------------------------
    changeQueInfo() {
      this.updateData = this.questionData;
      console.log(this.questionData);
      this.changeQue(this.updateData);
    },

    //修改接口----------------------------------------
    async changeQue(question) {
      let res = await changeQue(question);
      console.log(res.data);
      if (res.data.code == 200) {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.$router.push("/customer/queManage");
      }
 
     
    },
    //返回
    getBack() {
      this.$router.push("/customer/queManage");
    },
    //取消保存
    returnData() {
      this.questionData.type = this.$route.query.type;
      this.questionData.title = this.$route.query.title;
      this.questionData.status = this.$route.query.status;
      this.questionData.label = this.$route.query.label;
      this.questionData.description = this.$route.query.description;
    },
  },
};
</script>
<style lang="less" scoped>
h2 {
  padding: 15px;
}
.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}
.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-button {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 700;
  font-size: 100%;
  padding: 6px;
  border-radius: 0.25em;
}
.formBox,
.bothBtn {
  margin-left: 10px;
  margin-right: 10px;
  background-color: #fff;
  padding: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.col-md-6 {
  width: 50%;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}
.form-control {
  border-radius: 0;
  box-shadow: none;
  border-color: #d2d6de;
}
.form-control {
  display: block;
  width: 100%;
}
.text {
  font-size: 15px;
}
.grid-content {
  margin-top: 20px;
}

/* 日期选择框的宽度 */
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
#searchButton {
  margin-top: 6px;
}
.addCus {
  padding-bottom: 20px;
}
</style>
